import React, { Component } from 'react'

export default class App extends Component {
  state = {
    username: '',
    content: '',
    frame: 'vue',
    // #1 先准备一个状态来控制 radio 中的 value
    sex: 'woman',
  }
  handleInput = (e) => {
    this.setState({
      username: e.target.value,
    })
  }
  handleTextArea = (e) => {
    this.setState({
      content: e.target.value,
    })
  }
  handleSelect = (e) => {
    this.setState({
      content: e.target.value,
    })
  }
  handleRadio = (e) => {
    console.log(e.target.value)
    // #3 使用 onChange 来改变状态
    this.setState({
      sex: e.target.value,
    })
  }
  render() {
    return (
      <ul>
        <li>
          用户名：
          <input type='text' value={this.state.username} onChange={this.handleInput} />
        </li>
        <li>
          <textarea value={this.state.content} cols='30' rows='10' onChange={this.handleTextArea}></textarea>
        </li>
        <li>
          <select value={this.state.frame} onChange={this.handleSelect}>
            <option value='react'>React</option>
            <option value='vue'>Vue</option>
            <option value='angular'>Angular</option>
          </select>
        </li>
        <li>
          {/* #2 用状态 username 和 input 的 checked 进行绑定 */}
          <label htmlFor='man'>男</label>
          <input type='radio' value='man' id='man' checked={this.state.sex === 'man'} onChange={this.handleRadio} />
          <label htmlFor='woman'>女</label>
          <input type='radio' value='woman' id='woman' checked={this.state.sex === 'woman'} onChange={this.handleRadio} />
          <label htmlFor='unknown'>未知</label>
          <input type='radio' value='unknown' id='unknown' checked={this.state.sex === 'unknown'} onChange={this.handleRadio} />
        </li>
      </ul>
    )
  }
}
